<template>
  <div class="home">
    <!-- 回到顶部 -->
    <el-backtop :bottom="60">
      <div
        style="{
          height: 100%;
          width: 100%;
          background-color: #f2f5f6;
          box-shadow: 0 0 6px rgba(0,0,0, .12);
          text-align: center;
          line-height: 40px;
          color: #1989fa;
        }"
      >
        回到顶部
      </div>
    </el-backtop>
    <!--  内容页  -->
    <Inputs
      @tableDatas="tableDatas"
      @vLoadings="vLoadings"
      :vLoading="vLoading"
    />
    <el-table
      :data="tableData.list"
      border
      style="width: 100%"
      v-loading="vLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      @row-dblclick="chakan"
    >
      <el-table-column
        fixed
        :index="handleIndex"
        type="index"
        label="序号"
        width="70"
      ></el-table-column>
      <el-table-column prop="title" label="题干" width="500"  :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <p v-html="scope.row.title"></p>
        </template>
      </el-table-column>
      <el-table-column
        prop="sname"
        label="课程名称"
        width="120"
      ></el-table-column>
      <el-table-column prop="tname" label="题型" width="120"></el-table-column>
      <el-table-column prop="nname" label="难度" width="120"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      <el-table-column fixed="right" label="操作" width="90">
        <template slot-scope="scope">
          <Update :msg="scope.row" style="float: left" />
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="del(scope.row)"
          >
            <el-button
              type="text"
              size="small"
              slot="reference"
              style="float: left; margin-left: 9px"
              ><el-link type="danger">删除</el-link></el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 抽屉 -->
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="list.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="list.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Update from "./components/update.vue";
import Inputs from "./components/input.vue";
import home from "../api/home";

export default {
  name: "Home",
  components: { Inputs, Update },
  data() {
    return {
      //加载框
      vLoading: false,
      drawer: false,
      tableData: [],
      form: {
        name: "",
      },
      // 分页
      list: {
        total: 0, // 总页数
        pageTotal: 0,
        page: 0,
        pageSize: 0,
      },
    };
  },
  computed: {
    // 累加计算序号
    handleIndex() {
      return this.list.pageSize * (this.list.page - 1) + 1;
    },
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    //删除
    del(row) {
      home.del(row.qid).then((res) => {
        // this.getQid(row.qid);
        if (res.data.code == 20000) {
          this.$message({
            message: "恭喜你，删除成功！！！！！！！！！！！！！！！！",
            type: "success",
          });
          home.getPageC().then((res) => {
            this.tableData = res.data.result;
          });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    chakan(row){
      // console.log(row);
      this.$router.push("/ckakan/getpcheckbox?qid=" + row.qid);
    },
    //按qid查询数据
    getQid(qid) {
      this.vLoading = true;
      this.axios.get(`/question/qdetails/findAll/${qid}`).then((res) => {
        this.vLoading = false;
        this.tableData = res.data;
      });
    },
    tableDatas(data) {
      this.tableData = data;
      this.list = {
        total: Number(this.tableData.total), //总页
        pageTotal: this.tableData.pageTotal, // 页数
        page: this.tableData.page, // 当前
        pageSize: this.tableData.pageSize, // 每页显示几条
      };
    },
    vLoadings(data) {
      this.vLoading = data;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.list.pageSize = val;
      home.yemian(val).then((res) => {
        this.tableData = res.data.result;
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.list.page = val;
      home.danqina(val, this.list.pageSize).then((res) => {
        this.tableData = res.data.result;
      });
    },
  },
  // watch:{
  //   tableData(val){
  //     console.log(val)
  //     this.list = {
  //       total:val.total, //总页
  //       pageTotal:val.pageTotal, // 页数
  //       page:val.page, // 当前
  //       pageSize:val.pageSize, // 每页显示几条
  //     }
  //   }
  // }
};
</script>
<style scoped>
.home {
  width: 90%;
  margin: auto;
  color: rgb(105, 210, 243);
}
.block {
  margin: auto;
  width: 1000px;
  margin-top: 20px;
}
.el-tooltip__popper{
    font-size: 14px; 
    max-width:50% 
}
</style>